<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <p ref="p">{{count}}</p>
        <p>
            <button @click="count++">count++</button>
        </p>
        <hr>
        <p>
            {{zhang.name}}----{{zhang.age}}---{{zhang.info.height}}
        </p>
        <p>
            <button @click="zhang.age++">age++</button>
            <br>
            <button @click="zhang.info.height++">height++</button>
        </p>
    </div>
</body>
<script>
    let {createApp,nextTick} = Vue;
    let {ref,reactive,readonly,computed,watch} = Vue;

    var app = createApp({
        
        setup(props) {

            let count = ref(100);  /// ref对象
            // console.log(count);

            let addCount = ()=>{
                count.value ++;
            }

            // zhang ->ref对象
            let zhang = ref({// 目标对象
                name:"张三",
                age:18,
                info:{
                    height:173,
                    weight:65
                }
            });  // new Proxy(data,{get,set})

            // watch 监听 (默认是惰性的, 只有监听的数据发生改变时,才会触发监听函数)

            // 1. 监听ref对象(ref 计算属性)
            // watch(count,function(newVal,oldVal){
            //     console.log("count发生改变",newVal,oldVal);
            // })

            // 2. 监听代理对象 (当直接侦听一个响应式对象时，侦听器会自动启用深层模式,如果是ref对象, value值中存储的数据也是一个对象,不会自动启用深层模式)
            //    watch(zhang,function(newVal,oldVal){
            //         console.log("zhang发生改变",newVal,oldVal);
            //     })

            // {deep:true} 启用深度监听
            // watch(zhang,function(newVal,oldVal){
            //     console.log("zhang发生改变",newVal,oldVal);
            // },{deep:true})
            

            // watch 监听 (默认是惰性的, 只有监听的数据发生改变时,才会触发监听函数)
            // {immediate:true} 在侦听器创建时立即触发回调。第一次调用时旧值是 undefined。
            // watch(zhang,function(newVal,oldVal){
            //     console.log("zhang发生改变",newVal,oldVal);
            // },{deep:true,immediate:true})


            // flush:"pre"(默认)   数据发生改变后 视图更新前
            // flush:"sync"  数据发生改变后  立即触发
            // flush:"post"  数据发生,且视图更新后

            // 如何对应ref属性获取 页面中的组件/元素
            // 选项式 this.$refs.p
            // 组合式 let p = ref();  如果ref中不传任何参数,默认查找对应ref属性名的元素,找到就返回该元素(ref对象),找不到返回undefined

            let p = ref();    // 
            // console.log(p); // 此处打印肯定是undefined  (查找元素是在视图渲染之后)

            // 数据改变了视图不会立即更新 => 数据改变了,视图中的内容还是旧的
            // watch(count,function(newVal,oldVal){
            //     console.log("count发生改变",newVal,oldVal);
            //     console.log(p); 
            //     console.log(p.value.innerHTML); 
            // })
            
            // 数据改变了视图不会立即更新 => 等视图更新之后再获取

            // 方法1: 
            // watch(count,function(newVal,oldVal){
            //     nextTick(()=>{
            //         console.log("count发生改变",newVal,oldVal);
            //         console.log(p); 
            //         console.log(p.value.innerHTML); 
            //     })
            // })

            // 方法2: 
            // watch(count,function(newVal,oldVal){
            //     console.log("count发生改变",newVal,oldVal);
            //     console.log(p); 
            //     console.log(p.value.innerHTML); 
            // },{flush:"post"})

            // flush:"sync"演示


            watch(count,function(newVal,oldVal){
                console.log("count发生改变:pre",newVal,oldVal);
            },{flush:"pre"})

            watch(count,function(newVal,oldVal){
                console.log("count发生改变:sync",newVal,oldVal);
            },{flush:"sync"})

            watch(count,function(newVal,oldVal){
                console.log("count发生改变:post",newVal,oldVal);
            },{flush:"post"})





          

            
            






            


            return {
                // 键名: 传递出去的数据名 方法名  计算属性
                count:count,
                addCount,
                zhang,
                p,
            }
            
        },
        mounted() {
            // console.log("this",this);
        },
        watch:{
            // "zhang":function(){},
            // "zhang.age":function(){},
        }
        
    })

    app.mount("#app");








</script>
</html>